<template>
    <div class="home">
        <div class="carouselContainer">
            <div class="customeRow">
                <el-carousel :interval="5000" arrow="always" indicator-position="outside" :height="slideHeight">
                    <el-carousel-item v-for="(item,index) in carouselList" :key="index">
                        <div class="carouselItem" @click="handleCarouselItemRedirect(item.linkUrl)">
                            <img :src="item.imgUrl" alt="billingham"/>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="categoryList">
            <div class="customeRow">
                <el-row>
                    <el-col v-for="(item,index) in categoryList" :key="index" :xs="24" :sm="8" :md="8" :lg="8" :xl="8"
                            class="categoryItem" @click="handleRedirectList(item.linkUrl)">
                        <div class="categoryHeader">{{item.text}}</div>
                        <div class="categoryBody" @click="handleRedirectList(item.linkUrl)">
                            <img :src="item.imgUrl" alt="billingham"/>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </div>
        <div class="blogList">
            <div class="customeRow">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="blog">
                        <img src="../assets/8.jpg" alt="billingham"
                             @click="handleRedirectBlogDetail({id:36})"/>
                        <div class="blogInfo">
                            <div class="blogInfoMessage">追溯回遥远的47年前，Martin Billingham 与妻子 Ros 在家中共同缝制出 Billingham
                                历史上的第一个钓鱼袋
                            </div>
                            <div @click="handleRedirectBlogDetail({id:36})" class="research">探索品牌故事</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <HotProduct @handleRedirectDetail="handleRedirectDetail" :hotProductObject="hotProductObject"
                    @handleChangeProductObject="handleChangeProductObject"
                    :lists="goodsList" :leftWidth="leftWidth"></HotProduct>
        <Blog @handleRedirectBlogDetail="handleRedirectBlogDetail"
              @handleChangeProductObject="handleChangeProductObject" :blogObject="blogObject" :lists="blogList"
              :leftWidth="blogLeftWidth"></Blog>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Carousel, CarouselItem, Message} from 'element-ui';
    import HotProduct from '../components/HotProduct';
    import Blog from '../components/Blog';
    import serve from '../util/serve';

    Vue.use(Carousel);
    Vue.use(CarouselItem);
    export default {
        name: 'Home',
        components: {
            HotProduct,
            Blog
        },
        data: () => {
            return {
                articleList1: [],
                carouselList: [],
                categoryList: [],
                goodsList: [],
                leftWidth: 25,
                blogList: [],
                blogLeftWidth: 33.3,
                title: 'test',
                description: 'test',
                hotProductObject: {
                    translate: 'translate(0)',
                    clickCount: 0,
                },
                blogObject: {
                    translate: 'translate(0)',
                    clickCount: 0,
                    currentIndex: 0,
                },
                isPhone: false,
                slideHeight:'300px'
            }
        },
        metaInfo() {
            return serve.handleSetMeta('home', '/home');
        },
        props: {},
        mounted() {
            window.scroll(0, 0);
            const _this = this;
            _this.slideHeight = serve.handleGetSlideHeight(document.body.clientWidth) + 'px';
            _this.handleGetPage();
            window.onresize = () => {
                const isPhone = _this.isPhone;
                _this.slideHeight = serve.handleGetSlideHeight(document.body.clientWidth) + 'px';
                if (serve._isMobile()) {
                    if (!isPhone) {
                        _this.handleInitObject();
                        _this.isPhone = true;
                    }
                    _this.leftWidth = 100;
                    _this.blogLeftWidth = 100;
                    const list = _this.goodsList;
                    const blogList = _this.blogList;
                    for (let i = 0; i < list.length; i++) {
                        list[i].leftWidth = 100;
                    }
                    for (let i = 0; i < blogList.length; i++) {
                        blogList[i].leftWidth = 100;
                    }
                } else {
                    if (isPhone) {
                        _this.handleInitObject();
                        _this.isPhone = false;
                    }
                    _this.leftWidth = 25;
                    _this.blogLeftWidth = 33.3;
                    const list = _this.goodsList;
                    const blogList = _this.blogList;
                    for (let i = 0; i < list.length; i++) {
                        list[i].leftWidth = 25;
                    }
                    for (let i = 0; i < blogList.length; i++) {
                        blogList[i].leftWidth = 33.3;
                    }
                }
            };
        },
        beforeDestroy() {
            window.onresize = null;
        },
        methods: {
            handleChangeProductObject(e) {
                this[e.key] = e.value;
            },
            /**
             * 初始化
             */
            handleInitObject() {
                this.hotProductObject.clickCount = 0;
                this.hotProductObject.translate = 'translate(0)';
                this.blogObject.clickCount = 0;
                this.blogObject.translate = 'translate(0)';
                this.blogObject.currentIndex = 0;
            },
            handleRedirectDetail(params) {
                this.$router.push('/product/' + params.goods_id);
            },
            handleRedirectList(id) {
                this.$router.push({path: '/product', query: {category_id: id}});
            },
            handleRedirectBlogDetail(params) {
                this.$router.push('/blogs/' + params.id);
            },
            /**
             * 获取首页数据
             */
            handleGetPage() {
                const _this = this;
                const params = {
                    page_id: '10015'
                };
                const url = serve.handleGetUrl('getPage', params);
                const loading = serve.doLoading();
                serve.doPost(url, {})
                    .then((response) => {
                        loading.close();
                        const data = response.data;
                        if (data.code === 1) {
                            const list = data.data.items;
                            _this.carouselList = list[0].data;
                            _this.categoryList = list[1].data;
                            _this.articleList1 = list[2].data;
                            const goodsList = list[3].data;
                            const blogList = list[4].data;
                            let leftWidth = 25;
                            let blogLeftWidth = 33.3;
                            if (serve._isMobile()) {
                                _this.leftWidth = 100;
                                leftWidth = 100;
                                _this.blogLeftWidth = 100;
                                _this.isPhone = true;
                                blogLeftWidth = 100;
                            }
                            for (let i = 0; i < goodsList.length; i++) {
                                goodsList[i].leftWidth = leftWidth;
                            }
                            _this.goodsList = goodsList;
                            for (let i = 0; i < blogList.length; i++) {
                                blogList[i].leftWidth = blogLeftWidth;
                            }
                            _this.blogList = blogList;
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    loading.close();
                });
            },
            /**
             * 处理轮播图跳转页面事件
             * @param linkUrl
             */
            handleCarouselItemRedirect(linkUrl) {
                const params = linkUrl.split('?');
                if (params[0] === 'productDetail') {
                    const goods_id = params[1].split('=')[1];
                    this.handleRedirectDetail({goods_id})
                } else if (params[0] === 'productDetail') {
                    const id = params[1].split('=')[1];
                    this.handleRedirectList(id)
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .carouselContainer {
        background: #f4f4f4;
        padding: 30px 0;
    }

    .carouselContainer .el-carousel__arrow {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: #000;
        width: 30px;
        height: 30px;
        cursor: default !important;
    }

    .carouselContainer .el-carousel__arrow .el-icon-arrow-right:before {
        color: #d8a030;
        font-size: 20px;
        cursor: default;
    }

    .carouselContainer .el-carousel__arrow .el-icon-arrow-left:before {
        color: #d8a030;
        font-size: 20px;
        cursor: default;
    }

    .carouselItem {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .carouselItem img {
        width: 100%;
        max-height: 360px;
    }

    .carouselItemMessage {
        display: inline-block;
        text-align: left;
        margin-left: 20px;
    }

    .carouselItemMessage .title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .carouselItemMessage .subtitle {
        font-size: 14px;
        margin-bottom: 10px;
        padding-left: 10px;
    }

    .carouselItemMessage .more {
        font-size: 14px;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid #ee3124;
        display: inline-block;
        padding: 0 30px;
        font-weight: bold;
        color: #ee3124;
        cursor: pointer;
    }

    .categoryList {
        padding: 20px 0;
    }

    .categoryItem {
        padding: 0 5px;
    }

    .categoryItem:first-child {
        padding-left: 0;
        padding-right: 10px;
    }

    .categoryItem:last-child {
        padding-right: 0;
        padding-left: 10px;
    }

    .categoryHeader {
        background: #f4f4f4;
        padding: 10px 15px;
        font-weight: bold;
    }

    .categoryBody {
        background: #f4f4f4;
        padding: 0 15px 10px 15px;
        cursor: pointer;
    }

    .categoryBody img {
        width: 100%;
        max-width: 283px;
    }

    .blog {
        padding: 10px 0 30px 0;
        position: relative;
        cursor: pointer;
    }

    .blog img {
        width: 100%;
    }

    .blogInfo {
        position: absolute;
        top: calc(50% - 65px);
        color: #fff;
        left: 45px;
    }

    .blogInfo .blogInfoMessage {
        width: 260px;
        line-height: 30px;
        font-size: 15px;
    }

    .blogInfo .research {
        width: 150px;
        background: #c4384c;
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
    }

    @media screen and (max-width: 767px) {
        .categoryItem {
            padding: 0 10px;
        }

        .categoryItem:first-child {
            padding-left: 10px;
        }

        .categoryItem:last-child {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    @media screen and (max-width: 420px) {

        .carouselItem img {
            width: 100%;
        }

        .carouselItemMessage {
            margin-left: 0;
        }

        .carouselItemMessage .subtitle {
            padding-left: 0;
        }

        .carouselItemMessage .more {
            font-size: 14px;
            margin-top: 5px;
            margin-left: 0;
        }

        .categoryItem {
            margin-top: 10px;
        }

        .categoryItem:first-child {
            margin-top: 0;
            padding-left: 10px;
        }

        .categoryItem:last-child {
            padding-right: 10px;
        }

        .blog {
            padding: 10px;
        }

        .blogInfo {
            left: 20px;
            top: calc(50% - 50px);
        }

        .blogInfo .blogInfoMessage {
            line-height: 20px;
            font-size: 14px;
        }

        .blogInfo .research {
            font-size: 14px;
        }
    }

    @media screen and (max-width: 321px) {
        .carouselItem img {
            width: 100%;
        }
    }

    @media screen and (min-width: 421px) and (max-width: 600px) {

        .carouselItem img {
            width: 100%;
        }

        .blogInfo {
            left: 20px;
        }
    }

    @media screen and (min-width: 601px) and (max-width: 850px) {
        .blogInfo {
            left: 30px;
        }
    }

    @media screen and (max-width: 768px) {
        .categoryBody {
            text-align: center;
        }

    }
</style>
